<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-20 15:00:48
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-08-27 11:17:24
 * @FilePath: /XMate-h5/src/views/myXmate/myTeam/teamCustomer/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="h-full bg-white">
    <customerListHead
      @search="onSearch"
      :enableDrpt="true"
      :drptTitle="cp_drptTitle"
      @filter="onClickFilter"
      @orderTypeChange="orderTypeChange"
      @drptFilter="onClickDrptFilter"
    />

    <customerList
      :list="customerListData"
      :loading="customerLogic.loading"
      :finished="customerLogic.noMore"
      :refreshing="customerLogic.refreshing"
      :onRefresh="onRefreshCustomer"
      :st="customerLogic.startTime"
      :et="customerLogic.endTime"
      :myTeam="true"
      :dptIds="customerLogic.customerDptIds"
    />
    <teamCustomerFilter
      ref="teamCustomerFilterRef"
      @onConfirm="onConfirmFilter"
      :default-date-range="[customerLogic.startTime, customerLogic.endTime]"
    />

    <chooseTeamView
      ref="chooseTeamViewRef"
      :selectItems="selectTeams"
      @onConfirm="onConfirmTeam"
    />
  </div>
</template>

<script setup>
import customerList from "@/views/myXmate/components/customerList.vue";
import teamCustomerFilter from "@/views/myXmate/components/teamCustomerFilter.vue";
import customerListHead from "@/views/myXmate/components/customerListHead.vue";
import chooseTeamView from "@/views/myXmate/components/chooseTeamView.vue";
import { ref, computed, onMounted } from "vue";
import { useMyXmateStore } from "@/store";
import {
  getDefaultDateRange,
  formatCompletionTime,
  ParameterDateType,
} from "@/utils/timeTool";

const store = useMyXmateStore();

const teamCustomerFilterRef = ref(null);
const chooseTeamViewRef = ref(null);
const customerLogic = ref({
  list: [],
  noMore: false,
  loading: false,
  refreshing: false,

  page: 1,
  startTime: getDefaultDateRange().startDate,
  endTime: getDefaultDateRange().endDate,
  tags: [],
  orderBy: "meetCount",
  customerDptIds: [],
});
function onClickFilter() {
  console.log("onClickFilter", teamCustomerFilterRef.value);
  teamCustomerFilterRef.value.show();
}

const selectTeams = ref([]);

const cp_drptTitle = computed(() => {
  if (selectTeams.value.length == 0) {
    return "全部部门";
  }
  return selectTeams.value.map((v) => v.name).join(",");
});
function onClickDrptFilter() {
  chooseTeamViewRef.value.show();
}

// 排序改变
function orderTypeChange(v) {
  customerLogic.value.orderBy = v;
  getData(makeAPIParameter());
}

function onConfirmTeam(teams) {
  const needRefresh = selectTeams.value !== teams;
  console.log("onConfirmTeam: ", teams);
  selectTeams.value = teams;
  customerLogic.value.customerDptIds = teams.map((v) => v.id);
  if (needRefresh) {
    getData(makeAPIParameter());
  }
}

function onConfirmFilter(parameter) {
  console.log("onConfirmFilter", parameter);
  const { tags: tempTags, dateRange, customerTypeId } = parameter;
  if (tempTags) {
    customerLogic.value.tags = tempTags;
  } else {
    customerLogic.value.tags = [];
  }
  if (dateRange) {
    customerLogic.value.startTime = formatCompletionTime(
      dateRange[0],
      ParameterDateType.START_DATE
    );
    customerLogic.value.endTime = formatCompletionTime(
      dateRange[1],
      ParameterDateType.ENE_DATE
    );
  }
  if (customerTypeId) {
    customerLogic.value.customerTypeId = customerTypeId;
  }
  getData(makeAPIParameter());
}

const customerListData = computed(() => store.teamCustomerList);

const searchText = ref("");

onMounted(() => {
  // getData(makeAPIParameter());
  onRefreshCustomer();
  store.getMydprtAction();
});

function makeAPIParameter() {
  return {
    pageNumber: customerLogic.value.page,
    searchKey: searchText.value,
    startTime: formatCompletionTime(
      customerLogic.value.startTime,
      ParameterDateType.START_DATE
    ),
    endTime: formatCompletionTime(
      customerLogic.value.endTime,
      ParameterDateType.ENE_DATE
    ),
    pageSize: 200,
    asc: false,
    dptIds: customerLogic.value.customerDptIds,
    orderBy: customerLogic.value.orderBy,
    tags: customerLogic.value.tags,
    customerTypeId: customerLogic.value.customerTypeId,
  };
}

function onSearch(v) {
  console.log("onSearch", v);
  customerLogic.value.page = 1;
  searchText.value = v;
  getData(makeAPIParameter());
}

async function onRefreshCustomer() {
  customerLogic.value.refreshing = true;
  customerLogic.value.page = 1;
  await getData(makeAPIParameter());
  customerLogic.value.refreshing = false;
}

async function getData() {
  customerLogic.value.loading = true;
  customerLogic.value.refreshing = true;
  await store.getTeamCustomerListAction(makeAPIParameter());
  customerLogic.value.loading = false;
  customerLogic.value.refreshing = false;
}
</script>

<style lang="less" scoped></style>
